<template>
  <div class="app-container">
    <el-card class="content-edit">
      <div slot="header">路线设置</div>
      <el-form ref="form" :model="form" label-width="160px">
        <el-form-item label="路线别名" maxlength="20">
          <!--小程序中订单列表中显示-->
          <el-input v-model="form['alias']"/>
        </el-form-item>
        <el-form-item label="短信提醒">
          <el-radio-group v-model="form['sendSmsStatus']">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="预定须知">
          <el-input v-model="form['remarkContent']" :rows="12" type="textarea" maxlength="500" placeholder="请输入500字内的文本"/>
        </el-form-item>
        <el-form-item label="热门路线背景图" prop="icon">
          <div class="image-box">
            <ws-upload-single-img v-model="form['hotLineBanner']" :path="form['hotLineBannerUrl']" @finish="getUrl"/>
            <div class="image-remark">
              <div class="remarks"><span class="symbol">⁎</span>注：1. 图片单张大小支持1M一下,超过系统会自动压缩</div>
              <div class="remarks">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2. 推荐上传分辨率为750px*400px的图片</div>
              <div class="remarks">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3. 支持的图片格式 .jpg、.jpeg、.png、</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="热门路线备注">
          <el-input v-model="form['hotLineRemark']"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="$router.back()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'RouteRemarks',
    data() {
      return {
        // 页面加载动画
        pageLoading: false,
        form: {
          // 路线别名
          alias: '',
          // 短信提醒
          sendSmsStatus: 0,
          // 预定须知
          remarkContent: '',
          // 热门路线背景图片
          hotLineBanner: '',
          // 热门路线背景完整路径
          hotLineBannerUrl: '',
          // 热门路线备注
          hotLineRemark: ''
        }
      }
    },
    mounted(){
      this.loadData();
    },
    methods: {
      // 加载数据
      loadData(){
        (async () => {
          const result = await this.$service.applicationGetDailyRemarks();
          if (result.code === 0) {
            this.form = Object.assign(this.form, result.data || {});
          }
        })();
      },

      // 获取选择的图片真实地址
      getUrl(e){
        console.log(e);
        this.form['hotLineBannerUrl'] = e;
      },
      // 提交
      onSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            (async () => {
              const params = Object.assign({}, this.form);
              const result = await this.$service.applicationUpdateDailyRemarks(params);
              if (result.code === 0) {
                this.$message.success('操作成功~');
                this.$router.back();
              } else {
                this.$message.error(result.msg);
              }
            })();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>
